<template>
  <FormView :toolbar-attrs="{ buttons: ['back', 'slot'] }">
    <template #toolbar-button>
      <ToolbarButton icon="el-icon-s-operation" label="插槽方式" @click="show = true" />
      <ToolbarButton icon="el-icon-place" label="配置方式" @click="show1 = true" />
      <ToolbarButton icon="el-icon-apple" label="方法调用" @click="showPicker" />
    </template>
    <!-- 插槽方式 -->
    <DataTablePicker :api="getPage" :multiple="false" title="请选择" :visible.sync="show" @confirm="confirm">
      <TableColumn prop="statusCn" label="状态" width="100" align="center" />
      <TableColumn prop="name" label="姓名" width="120" align="center" />
      <TableColumn prop="sex" label="性别" width="70" align="center" />
      <TableColumn prop="nation" label="民族" width="100" align="center" />
      <TableColumn prop="birth" label="出生年月" width="110" align="center" />
      <TableColumn prop="firstWkTime" label="参加工作时间" width="110" align="center" />
      <TableColumn prop="majorNameS" label="熟悉专业" align="center" />
    </DataTablePicker>
    <!-- 配置方式 -->
    <DataTablePicker
      :multiple="false"
      title="请选择"
      :columns="[
        {
          prop: 'statusCn',
          label: '状态'
        },
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'sex',
          label: '性别'
        }
      ]"
      :visible.sync="show1"
      @confirm="confirm" />
  </FormView>
</template>

<script>
  import { showDataTablePicker } from '@/util/table'

  export default {
    name: 'DataTablePickerDemo',
    data() {
      return {
        show: false,
        show1: false
      }
    },
    methods: {
      confirm(row) {
        // console.log(row)
      },
      async showPicker() {
        // 方法调用
        await showDataTablePicker(
          {
            api: null,
            multiple: true,
            title: '测试',
            columns: [
              {
                prop: 'statusCn',
                label: '状态'
              },
              {
                prop: 'name',
                label: '姓名'
              },
              {
                prop: 'sex',
                label: '性别'
              }
            ]
          },
          {
            confirm: this.confirm
          }
        )
      }
    }
  }
</script>
